<template>
  <div class="container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="渠道名称">
        <el-input v-model="formInline.channelName" placeholder="请输入渠道名称" clearable />
      </el-form-item>
      <el-form-item label="渠道状态">
        <el-select v-model="formInline.status" placeholder="渠道状态" clearable></el-select>
      </el-form-item>
      <el-form-item label="渠道类型">
        <el-select v-model="formInline.type" placeholder="渠道类型" clearable></el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="formInline.date"
          type="daterange"
          unlink-panels
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :shortcuts="shortcuts"
          size="small"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" size="small" @click="search">搜索</el-button>
        <el-button :icon="RefreshRight" size="small">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="button">
      <el-button type="primary" plain size="small" :icon="Plus" @click="addChannel">新增</el-button>
      <el-button
        type="success"
        plain
        size="small"
        :icon="Edit"
        :disabled="isDisabled"
        @click="xiugaiqu"
      >修改</el-button>
      <el-button
        type="danger"
        plain
        size="small"
        :icon="Delete"
        :disabled="isDisableds"
        @click="deletes"
      >删除</el-button>
      <el-button type="info" plain size="small" :icon="Upload">导入</el-button>
      <el-button type="warning" plain size="small" :icon="Download">导出</el-button>
    </div>
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="编号" width="120">
        <template #default="scope">{{ scope.row.channelId }}</template>
      </el-table-column>
      <el-table-column property="name" label="渠道名称" width="120">
        <template #default="scope">{{ scope.row.channelName }}</template>
      </el-table-column>
      <el-table-column property="address" label="渠道类型" width="120">
        <template #default="scope">
          <el-tag type="primary" v-if="scope.row.type == 1">线上渠道</el-tag>
          <el-tag type="success" v-else>线下渠道</el-tag>
        </template>
      </el-table-column>
      <el-table-column property="address" label="渠道状态" width="120">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.status == 1">正常</el-tag>
          <el-tag type="info" v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column property="name" label="创建人" show-overflow-tooltip>
        <template #default="scope">{{ scope.row.createBy }}</template>
      </el-table-column>
      <el-table-column property="name" label="创建事件" show-overflow-tooltip>
        <template #default="scope">{{ scope.row.createTime }}</template>
      </el-table-column>
      <el-table-column property="name" label="备注信息" show-overflow-tooltip>
        <template #default="scope">{{ scope.row.remark }}</template>
      </el-table-column>
      <el-table-column align="center" label="操作" width>
        <template #default="scope">
          <el-icon style="color: skyblue;" @click="editbianji(scope.row.channelId)">
            <Edit />
          </el-icon>
          <el-icon style="margin-left: 20px;color: skyblue;" @click="deletedange(scope.row.channelId)">
            <Delete />
          </el-icon>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :total="total" @changePage="setPage" @changeRows="setRows"></Pagination>

    <el-dialog v-model="dialogTeamFormVisible" :title="channelId ? '修改渠道' : '添加渠道'">
      <el-form
        ref="teamFormRef"
        :model="teamForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="渠道名称" prop="teamName">
          <el-input v-model="teamForm.channelName" />
        </el-form-item>
        <el-form-item label="渠道状态" prop="status">
          <el-radio-group v-model="teamForm.status" class="ml-4">
            <el-radio :value="1">正常</el-radio>
            <el-radio :value="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="渠道类型" prop="type">
          <el-radio-group v-model="teamForm.type" class="ml-4">
            <el-radio :value="1">线上渠道</el-radio>
            <el-radio :value="2">线下渠道</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="teamForm.remark" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button v-if="channelId" type="primary" @click="editTeamForm">编辑</el-button>
          <el-button v-else type="primary" @click="onSubmit">添加</el-button>
          <el-button @click="quite">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog v-model="dialogTeamFormVisible2" title="系统提示">
      <el-icon style="color: #e6a23c;font-size:24px;">
        <WarningFilled />
      </el-icon>
      <span style="margin-left:20px;line-height: 24px;">
        是否确认删除渠道编号为"
        <span v-for="item in idArray" :key="item.channelId">{{ item }},</span>"的数据项?
      </span>
      <div class="bottomanniu">
        <el-button @click="quite">取消</el-button>
        <el-button type="primary" @click="onSubmitdelete">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog v-model="dialogTeamFormVisible3" title="系统提示">
      <el-icon style="color: #e6a23c;font-size:24px;">
        <WarningFilled />
      </el-icon>
      <span style="margin-left:20px;line-height: 24px;">
        是否确认删除渠道编号为"
        <span>{{ ids }},</span>"的数据项?
      </span>
      <div class="bottomanniu">
        <el-button @click="quite">取消</el-button>
        <el-button type="primary" @click="onSubmitdelete2">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive } from "vue";
import {
  Search,
  RefreshRight,
  Plus,
  Edit,
  Delete,
  Upload,
  Download,
  WarningFilled
} from "@element-plus/icons-vue";
import {
  getAllChannelslists,
  addChannels,
  getIDChannellists,
  updateChannels,
  deleteAllChannels
} from "../../../api/tienchin/channelguanli";
import {
  ElTable,
  ComponentSize,
  FormInstance,
  FormRules,
  ElMessage
} from "element-plus";
import Pagination from "../../../components/Pagination/index.vue";
import { number } from "echarts";

const formSize = ref<ComponentSize>("default");
const formInline = ref({
  channelId: "",
  channelName: "",
  status: "",
  type: "",
  remark: ""
});
const queryInfo = ref({
  pageNum: 1,
  pageSize: 10
});
const multipleSelection = ref();
const total = ref(0);
const channelId = ref();
const isDisabled = ref(true);
const isDisableds = ref(true);
const idArray = ref([]);
const dialogTeamFormVisible = ref(false);
const dialogTeamFormVisible2 = ref(false);
const dialogTeamFormVisible3 = ref(false);
const teamFormRef = ref<FormInstance>();
const teamForm = ref({
  channelId: "",
  channelName: "",
  status: "",
  type: "",
  remark: ""
});
const rules = reactive<FormRules>({
  channelName: [{ required: true, message: "请输入渠道名称", trigger: "blur" }]
});

const tableData = ref([]);

const shortcuts = [
  {
    text: "Last week",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    }
  },
  {
    text: "Last month",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    }
  },
  {
    text: "Last 3 months",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    }
  }
];
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
  console.log(val);
  if (val.length != 1) {
    isDisabled.value = true;
  } else {
    isDisabled.value = false;
  }
  if (val.length >= 1) {
    isDisableds.value = false;
  } else {
    isDisableds.value = true;
  }
  idArray.value = [];
  val.forEach(item => {
    idArray.value.push(item.channelId);
  });
  console.log(idArray.value);
};
const quite = () => {
  dialogTeamFormVisible.value = false;
  dialogTeamFormVisible2.value = false;
  dialogTeamFormVisible3.value = false;
};
const addChannel = () => {
  channelId.value = "";
  teamForm.value.channelName = "";
  teamForm.value.status = "";
  teamForm.value.type = "";
  teamForm.value.remark = "";
  dialogTeamFormVisible.value = true;
};
const xiugaiqu = () => {
  channelId.value = multipleSelection.value[0].channelId;
  dialogTeamFormVisible.value = true;
  editShow();
};
const onSubmit = () => {
  channelId.value = ''
  addChannels(teamForm.value).then(res => {
    console.log(res);
    if (res.code != 200) return ElMessage.error("添加渠道失败");
    dialogTeamFormVisible.value = false;
    getAllchannelLists();
  });
};
const editTeamForm = () => {
  teamForm.value.channelId = channelId.value;
  updateChannels(teamForm.value).then(res => {
    console.log(res);
    if (res.code != 200) return ElMessage.error("编辑渠道失败");
    dialogTeamFormVisible.value = false;
    getAllchannelLists();
  });
};
const deletes = () => {
  dialogTeamFormVisible2.value = true;
};
const ids = ref()
const deletedange = (id) => {
  ids.value = id
  dialogTeamFormVisible3.value = true;
}
const onSubmitdelete = () => {
  deleteAllChannels(idArray.value).then((res) => {
    console.log(res)
    dialogTeamFormVisible2.value = false;
    getAllchannelLists()
  })
}
const onSubmitdelete2 = () => {
  deleteAllChannels(ids.value).then((res) => {
    console.log(res)
    dialogTeamFormVisible3.value = false;
    getAllchannelLists()
  })
}
const search = () => {
  getAllChannelslists(teamForm.value).then((res) => {
    console.log(res)
    tableData.value = res.rows;
    total.value = res.total;
  })
}
const editbianji = (id) => {
  dialogTeamFormVisible.value = true;
  channelId.value = id;
  teamForm.value.channelId = id;
}
const getAllchannelLists = () => {
  getAllChannelslists(queryInfo.value).then(res => {
    console.log(res);
    tableData.value = res.rows;
    total.value = res.total;
  });
};
const editShow = () => {
  getIDChannellists(channelId.value).then(res => {
    console.log(res);
    teamForm.value.channelName = res.data.channelName;
    teamForm.value.status = res.data.status;
    teamForm.value.type = res.data.type;
    teamForm.value.remark = res.data.remark;
  });
};
const setPage = (val: number) => {
  // console.log(val);
  queryInfo.value.pageNum = val;
  getAllchannelLists();
};
const setRows = (val: number) => {
  // console.log(val);
  queryInfo.value.pageSize = val;
  getAllchannelLists();
};
onMounted(() => {
  getAllchannelLists();
});
</script>

<style lang="scss" scoped>
.bottomanniu{
  margin-top: 20px;
  text-align: right;
}
.container {
  padding: 20px;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>